@(userSession: util.UserSession)

@content = {

<div class="navbar navbar-fixed-top">
	
	<div class="navbar-inner">
		
		<div class="container">
			
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 				
			</a>
			
			<a class="brand" href="@routes.Application.index()">[YOU]</a>
			
			<div class="nav-collapse">
			<!--  -->
				<ul class="nav pull-right">
					<li>
						<a href="#"><span class="badge badge-warning">7</span></a>
					</li>
					
					<li class="divider-vertical"></li>
					
					<li class="dropdown">
						
						<a data-toggle="dropdown" class="dropdown-toggle " href="#">
							@{userSession.getUser().username}<b class="caret"></b>							
						</a>
						
						<ul class="dropdown-menu">
							<li>
								<a href="./account.html"><i class="icon-user"></i> Account Setting  </a>
							</li>
							
							<li>
								<a href="./change_password.html"><i class="icon-lock"></i> Change Password</a>
							</li>
							
							<li class="divider"></li>
							
							<li>
								<a href="@routes.Application.logout()"><i class="icon-off"></i> Logout</a>
							</li>
						</ul>
					</li>
				</ul>
				
			</div> <!-- /nav-collapse -->
			
		</div> <!-- /container -->
		
	</div> <!-- /navbar-inner -->
	
</div> <!-- /navbar -->




<div id="content">
	
	<div class="container">
		
		<div class="row">
			
			<div class="span3">
				
				<div class="account-container">
				
					<div class="account-avatar">
						<!-- 
						<img src="@routes.Assets.at("img/headshot.png")" alt="" class="thumbnail" />
						 -->
						 <img src="@{userSession.getUser().pictureUrl}" alt="" class="thumbnail" />
					</div> <!-- /account-avatar -->
				
					<div class="account-details">
					
						<span class="account-name">@{userSession.getUser().username}</span>
						
						<span class="account-actions">
							<a href="javascript:;">Profile</a> |
							
							<a href="javascript:;">Edit Settings</a>
						</span>
					
					</div> <!-- /account-details -->
				
				</div> <!-- /account-container -->
				
				<hr />
				
				<ul id="main-nav" class="nav nav-tabs nav-stacked">
					
					<li>
						<a href="@routes.Connect.index()">
							<i class="icon-cogs"></i>
							Connect 		
						</a>
					</li>
					
					<li>
						<a href="@routes.Search.index()">
							<i class="icon-search"></i>
							Search	
						</a>
					</li>
					
					<li class="active">
						<a href="@routes.Focus.index()">
							<i class="icon-pushpin"></i>
							Focus		
						</a>
					</li>
					
					<!-- 
					<li>
						<a href="./grid.html">
							<i class="icon-th-large"></i>
							Grid Layout	
							<span class="label label-warning pull-right">5</span>
						</a>
					</li>
					<li>
						<a href="./charts.html">
							<i class="icon-signal"></i>
							Charts	
						</a>
					</li>
					
					<li>
						<a href="./account.html">
							<i class="icon-user"></i>
							User Account							
						</a>
					</li>
					
					<li>
						<a href="./login.html">
							<i class="icon-lock"></i>
							Login	
						</a>
					</li>
					 -->
				</ul>	
				
				<hr />
				<!-- 
				<div class="sidebar-extra">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
				</div> <!-- .sidebar-extra -->
				
				<br />
		
			</div> <!-- /span3 -->
			
			
			
			<div class="span9">
				
				<h1 class="page-title">
					[YOU]: The Social Machine that wrapps you					
				</h1>
				
				<div class="row">
				  <div class="span3" id="focus-summary">
				  	<div class="widget">
				  		<div class="widget-content">
				  			<div class="row-fluid">
					  			<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
				                  <i class="icon-calendar icon-large"></i>
				                  <span></span> <b class="caret" style="margin-top: 8px"></b>
				                </div>
			                </div>
			                <div class="invisible-horizontal-divider"></div>
				            <h4>Birthdays <i class="icon-gift"></i></h4>
					  		<div class="clearfix">
					  			<!-- <img alt="" src="" class="img-polaroid"> -->
					  			<div class="picture">
					  				<img src="@routes.Assets.at("img/headshot.png")" alt="" class="thumbnail" />
					  			</div>
					  			<div class="content">
					  				<div>
					  					<a>Kabrito</a>
						  				<p>30/02/2123</p>
					  				</div>
					  			</div>
					  		</div>
					  		<hr>
					  		<h4>Events <i class="icon-calendar"></i></h4>
					  		<div class="clearfix">
					  		</div>
					  		<hr>
					  		<h4>Trips <i class="icon-plane"></i></h4>
					  		<div class="clearfix">
			               	</div>
			               
				  		</div><!-- end of widget-content -->
				  	</div><!-- end of widget -->
				  </div>
				  <div class="span6" id="focus-details">
				  	<div class="widget">
				  		<div class="widget-content">
				  			<span class="focus-item-name">Paper Review</span>
				  			<span class="focus-item-date">27/06/2013</span>
				  			<hr>
				  		</div>
				  	</div>
				  </div>
				</div>
				
			</div> <!-- /span9 -->
			
			
		</div> <!-- /row -->
		
	</div> <!-- /container -->
	
</div> <!-- /content -->
					
	
<div id="footer">
	
	<div class="container">				
		<hr>
	</div> <!-- /container -->
	
</div> <!-- /footer -->

}


@footer = {

	               <script type="text/javascript">
               $(document).ready(function() {
                  $('#reportrange').daterangepicker(
                     {
                        ranges: {
                           'Today': [new Date(), new Date()],
                           'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                           'Last 7 Days': [moment().subtract('days', 6), new Date()],
                           'Last 30 Days': [moment().subtract('days', 29), new Date()],
                           'This Month': [moment().startOf('month'), moment().endOf('month')],
                           'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                        },
                        opens: 'left',
                        format: 'MM/DD/YYYY',
                        separator: ' to ',
                        startDate: moment().subtract('days', 29),
                        endDate: new Date(),
                        minDate: '01/01/2012',
                        maxDate: '12/31/2013',
                        locale: {
                            applyLabel: 'Submit',
                            fromLabel: 'From',
                            toLabel: 'To',
                            customRangeLabel: 'Custom Range',
                            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
                            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                            firstDay: 1
                        },
                        showWeekNumbers: true,
                        buttonClasses: ['btn-danger'],
                        dateLimit: false
                     },
                     function(start, end) {
                        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                     }
                  );
                  //Set the initial state of the picker label
                  $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

               });
               </script>

}

@main("[YOU]")(content)(footer)
